import { genChartByAiUsingPost } from '@/services/AiBi/chartController';
import { UploadOutlined } from '@ant-design/icons';
import { Helmet } from '@umijs/max';
import {
  Button,
  Card,
  Col,
  Divider,
  Form,
  Input,
  Row,
  Select,
  Space,
  Spin,
  Upload,
  message,
} from 'antd';
import TextArea from 'antd/es/input/TextArea';
import ReactECharts from 'echarts-for-react';
import React, { useState } from 'react';
import Settings from '../../../../config/defaultSettings';

const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};
const GenChart: React.FC = () => {
  const [chartInfo, setchartInfo] = useState<API.AiResponse>();
  const [submit, setsubmit] = useState<boolean>(false);
  const [option, setoption] = useState<any>();
  const onFinish = async (values: any) => {
    if (submit) return '';
    const params = {
      ...values,
      file: undefined,
    };
    setsubmit(true);
    setoption(undefined);
    setchartInfo(undefined);
    try {
      const res = await genChartByAiUsingPost(params, {}, values.file.file.originFileObj);
      console.log(res);
      if (res.code !== 0) {
        message.error('生成失败:' + res.message);
      } else {
        message.success('生成成功');
        const chartOption = JSON.parse(res.data.genChart, '');
        if (!chartOption) {
          throw new Error('可视化解析错误');
        } else {
          setoption(chartOption);
          setchartInfo(res.data);
        }
      }
    } catch (e: any) {
      message.error('生成失败:' + e.message);
      console.error(e.message);
    }
    setsubmit(false);
  };
  return (
    <div className={'genChart'}>
      <Helmet>
        <title>
          {'智能分析'} - {Settings.title}
        </title>
      </Helmet>
      <Row gutter={30}>
        <Col span={12}>
          <Card>
            <Form
              labelCol={4}
              wrapperCol={16}
              labelAlign={'left'}
              name="genChart"
              {...formItemLayout}
              onFinish={onFinish}
              initialValues={{}}
            >
              <Form.Item
                name="chartName"
                label="图表名称"
                rules={[{ required: true, message: '请为你图起个名' }]}
              >
                <Input placeholder="为你的图表起个名字吧" />
              </Form.Item>

              <Form.Item
                name="goal"
                label="分析目标"
                rules={[{ required: true, message: '请输入你的需求' }]}
              >
                <TextArea placeholder="请输入你的分析需求，比如：分析用户增长趋势" />
              </Form.Item>

              <Form.Item name="chartType" label="图表类型">
                <Select
                  placeholder="Please select a chartType"
                  options={[
                    { value: '折线图', label: '折线图' },
                    { value: '柱状图', label: '柱状图' },
                    { value: '面积图', label: '面积图' },
                    { value: '饼图', label: '饼图' },
                    { value: '雷达图', label: '雷达图' },
                  ]}
                ></Select>
              </Form.Item>

              <Form.Item name="file" label="原始数据">
                <Upload name="file" maxCount={1}>
                  <Button icon={<UploadOutlined />}>上传原始数据</Button>
                </Upload>
              </Form.Item>

              <Form.Item wrapperCol={{ span: 16, offset: 6 }}>
                <Space>
                  <Button type="primary" htmlType="submit" loading={submit} disabled={submit}>
                    智能分析
                  </Button>
                  <Button htmlType="reset">reset</Button>
                </Space>
              </Form.Item>
            </Form>
          </Card>
        </Col>
        <Col span={12}>
          <Card title={'分析结论'}>
            {chartInfo?.genResult}
            <Spin spinning={submit} />
          </Card>
          <Divider />
          <Card title={'可视化图表'}>
            {option && <ReactECharts option={option} />} <Spin spinning={submit} />
          </Card>
        </Col>
      </Row>
    </div>
  );
};
export default GenChart;
